<template>
<view class="page" > 
	<view class='nav' :style="'height:'+navH1+'px;'">
		<view class="input_view" :style="'position:absolute;top:'+navH+'px;height:'+ navH2+'px'">
			<view class="input_view"  :style="'height:'+ navH2+'px'">
				<view class="title">选址招商</view>
			</view>
		</view>
	</view>
	<view class="input_ss"  :style="'top:'+ navH1+'px;'">
		<view class="input_div">
			<image class="ss" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/index_ss.png" mode=""></image>
			<input class="ss_text" placeholder="输入关键词" v-model="keywords" confirm-type="search" @confirm='openList'/>
		</view>
		<view class="btn_list" @click="openSx">
			匹配筛选
		</view>
	</view>
	
<!-- 	<view class="t_div flex" :style="'top:'+ (navH1+60)+'px;'">
		<view class="wxt_div wxt_div1" :class="type_id==item.id?'bgcolor_blue':''" v-for="(item,index) in typeList" :key="item.id">
			<image v-if="type_id==item.id?'color_fff':''" :src='"https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/iconw"+(index+1)+".png"' mode=""></image>
			<image v-else :src='"https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/iconb"+(index+1)+".png"' mode=""></image>
			<view :class="type_id==item.id?'color_fff':''">{{item.name}}</view>
		</view>
	</view> -->
	
	<view class="r_div" :style="'top:'+ (navH1+130)+'px;'">
		<view class="wxt_div" @click="changeMode">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/wxt.png" mode=""></image>
			<view class="">图层</view>
		</view>
		<view class="wxt_div" @click="initCity">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dingwei.png" mode=""></image>
			<view class="">{{myCity.city_name}}</view>
		</view>
		<view class="wxt_div" @click="showList">
			<image src="~@/static/image/list_qh.png" mode=""></image>
			<view class="">列表</view>
		</view>
	</view>

	
	<uni-popup ref="popup" @change='pChange' type="bottom" background-color='#fff' mask-background-color='rgba(0,0,0,0.2)'>
		<view class="p_div1" @touchstart="touchstart" v-if="mapData&&mapData.detail" @click='toDetail(mapData.detail.id)'>
			<view class="list_item flex_sb">
				<view class="img">
					<image mode="scaleToFill" :src="mapData.detail.thumb||mapData.detail.imgs||mapData.detail.logo" :lazy-load='true'></image>
					<view class="img_level" v-if="mapData.detail.level_name">{{mapData.detail.level_name}}</view>
				</view>
				
				<view class="right_div">
					<view class="r_title">{{mapData.detail.park_name}}</view>
					<view class="" v-if="mapData.detail.chain_name">
						<view class="chain_view"  v-for="(chain,index) in mapData.detail.chain_name.slice(0,2)" :key="index">{{chain}}</view>
					</view>
					<view class="add_view"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/dizhi.png" mode=""></image> {{mapData.detail.address||'-'}}</view>
					<view class="flex_sb">
						<view class="add_view">
							<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/dianhua.png" mode="" ></image>
							<text >{{mapData.detail.phone||'-'}} </text> 
						</view>
						<view class="add_view" v-if="mapData.detail.juli||mapData.detail._geo_distance">
							<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/juli.png" mode=""></image> {{mapData.detail.juli||mapData.detail._geo_distance}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
	<view class="map_div">
		<map v-if='mapData.lng' ref="mapView" name="" 
			@markertap='markertap' @regionchange='changeScale' @callouttap='clickMap'
			:enable-satellite='satellite' 
			:longitude='mapData.lng' :latitude='mapData.lat' 
			:scale='mapData.scale' :markers="mapData.list"
			 :polygons='polygons'
			>
			<!-- :circles='circles' -->
		</map>
		<view class="ps_div">
			<view class="ps_item">
				<image src="../../static/image/1.png" mode=""></image>
				<view class="">国家级</view>
			</view>
			<view class="ps_item">
				<image src="../../static/image/2.png" mode=""></image>
				<view class="">省级</view>
			</view>
			<view class="ps_item">
				<image src="../../static/image/3.png" mode=""></image>
				<view class="">其他</view>
			</view>
		</view>
	</view>
	
	
	<uni-popup ref="pop_sx" type="bottom" background-color='#fff' mask-background-color='rgba(0,0,0,0.1)'>
		<sxDiv @getQuery='getQuery' ref="sxDiv_ref"></sxDiv>
	</uni-popup>
	
	<uni-popup ref="pop_list" type="bottom" background-color='#fff' mask-background-color='rgba(0,0,0,0.1)'>
		<view class="" :style="'height:'+ height">
			<view class='flex type_div'>
				<view @click="changeType(item.id)" class="listType" :class="type_name==item.id?'active_item':''" v-for="(item,index) in listType" :key="index">{{item.name}}</view>
			</view>
			<listPage v-if='type_name!="rc"' :type_name='type_name=="zc"?"policy":"park"' :type_name_a='type_name=="cf"?"park1":type_name=="ly"?"park2":type_name=="dk"?"park3":""' height='calc(100% - 90px)' 
								:list='type_name=="park"?parkList:
												type_name=="cf"?cfList:
												type_name=="ly"?lyList:
												type_name=="dk"?dkList:zcList'
			 
								:total='type_name=="park"?parkList.length:
												type_name=="cf"?cfList.length:
												type_name=="ly"?lyList.length:
												type_name=="dk"?dkList.length:zcList.length' @getMore='()=>{}'>
				<endlist :isLoad='false' :isfinsh='true' :length='type_name=="park"?parkList.length:
												type_name=="cf"?cfList.length:
												type_name=="ly"?lyList.length:
												type_name=="dk"?dkList.length:zcList.length'></endlist>
			</listPage>
			<scroll-view scroll-y="true"  class="list_ddd" style='height:calc(100% - 90px)'  v-if="type_name=='rc'">
				<view class="flex_sb rc_item"  v-for="(item,index) in rcList" :key="index">
					<view class="rc_item_left">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="rc_item_right">
						<view class="rc_name">{{item.name}}</view>
						<view class="rc_add">{{item.address}}</view>
						<view class="rc_desc">{{item.direction}}</view>
					</view>
				</view>
				<endlist :isLoad='false' :isfinsh='true' :length='rcList.length'></endlist>
			</scroll-view>
		</view>
	</uni-popup>
	
	<Tabbar current="2"></Tabbar>
</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app';
	import Tabbar from '@/components/tabbar.vue'
	import sxDiv from '@/components/sxDiv.vue'
	import listPage from '@/components/listPage.vue'
	import endlist from '@/components/endlist.vue'
	import mapCode from '@/utils/mapData.json'
	import { policy,city,getResourceTech ,parklist,chain_city_map,getparkdetail,GetSuCityInfo, getHttpDataFromWeb } from '@/utils/api'
	let navH = ref(uni.getStorageSync('navH'))
	let navH1 = ref(uni.getStorageSync('navH1'))
	let navH2 = ref(uni.getStorageSync('navH2'))
	let color = ["#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66']
	let color1 = ["#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de']
	
	const internalInstance = getCurrentInstance()
	var isOnload = false	
		
	function openList(){
		getProject()
		pop_list.value.open()
	}
		
	let type_name = ref('park')
	const listType = reactive([
		{name:'园区',id:'park'},
		// {name:'厂房',id:'cf'},
		{name:'地块',id:'dk'},
		{name:'楼宇',id:'ly'},
		{name:'政策',id:'zc'},
		// {name:'科研人才',id:'rc'},
	])
	var cfList = reactive([])
	var lyList = reactive([])
	var dkList = reactive([])
	var rcList = reactive([])
	var zcList = reactive([])
	function changeType(type){
		cfList.length=0
		lyList.length=0
		dkList.length=0
		rcList.length=0
		zcList.length=0
		type_name.value = type
		if(type=='rc'){
			getResourceTech({city_id:cityItem.id,limit:2000,keywords:keywords.value,...queryData}).then(res=>{
				rcList = res.data
				internalInstance.proxy.$forceUpdate()
			})
			return
		}
		if(type=='park'){
			return
		}
		let api = type=='zc'?policy.getList({city_id:cityItem.id,limit:2000,keywords:keywords.value,...queryData}):
							parklist({city_id:cityItem.id,limit:2000,keywords:keywords.value,...queryData,
							type:type=='park'?0:type=='cf'?1:type=='ly'?2:type=='dk'?3:''})
		api.then(res=>{
			if(type=='park'){
				parkList = res.data.data
			}else if(type=='cf'){
				cfList = res.data.data
			}else if(type=='ly'){
				lyList = res.data.data
			}else if(type=='dk'){
				dkList = res.data.data
			}else if(type=='zc'){
				zcList = res.data.data
			}
			internalInstance.proxy.$forceUpdate()
		})
	}
	
	onShow(()=>{
		if(isOnload){
			// initCity()
		}
	})
	
	function toDetail(id){
		if(type_name=='park'){
			uni.navigateTo({
				url:'/pages/parkDetail/parkDetail?id='+id
			})
		}else if(type_name=='ly'){
			uni.navigateTo({
				url:'/pages/dkDetail/dkDetail?type=park2&id='+id
			})
		}else if(type_name=='dk'){
			uni.navigateTo({
				url:'/pages/dkDetail/dkDetail?type=park3&id='+id
			})
		}
		
	}
	
	// 样式
	const height = uni.getStorageSync('windowH') - 180 +'px'
	const style = reactive({
		height:'300px',
		windowH:uni.getStorageSync('windowH')+'px',
	})
	function touchstart(e){
		let info = uni.createSelectorQuery().select(".p_content")
		let height = 0
		info.boundingClientRect((data)=>{ //data - 各种参数
			height = data.height
			if(height==220){
				style.height = uni.getStorageSync('windowH') - 180 +'px'
			}
		}).exec()
	}
	function pChange(e){
		if(!e.show){
			style.height = '300px'
		}
	}
	
	function huanH(name,num){
		name = name.split('')
		name = name.map((item,index)=>{
			return index%num==(num-1) ? item + '\n' : item
		})
		name = name.join('')
		return name
	}
	
	onBeforeMount(()=>{
		uni.hideTabBar({
				animation: false
		})
	})
	onMounted(()=>{
		setTimeout(()=>{
			isOnload=true
		},1000)
		if(cityItem.type<3){
			getCode()
		}else{
			
		}
		openSx()
	})
	
	//列表
	const pop_list = ref(null)
	function showList(){
		type_name.value = 'park'
		pop_list.value.open()
	}
	
	//筛选
	const pop_sx = ref(null)
	var queryData = reactive({})
	var parkList = reactive([])
	function openSx(){
		pop_sx.value.open()
	}
	function getQuery(data){
		for(var key in data){
			if(data[key] ==''){
				 delete data[key]
			}
	  }
		queryData = data
		pop_sx.value.close()
		
		type_name.value = 'park'
		pop_list.value.open()
		getProject({city_id:cityItem.id,limit:2000,keywords:keywords.value,...queryData})
	}
	
	
	// 类型
	const typeList = reactive([
		{name:'园区',id:'park'},
		{name:'项目',id:'project'},
		{name:'地块',id:'dikuai'},
	])
	
	const type_id = ref('project')
	
	// 地图
	let mapData = reactive({
		lng:'',
		lat:'',
		scale:16,
		list:[],
		detail:{},
	})
	let circles = reactive([{
		latitude:'',
		longitude:'',
		color:'#439EF2',
		fillColor:'#439EF288',
		radius:10
	}])
	
	let myCity = uni.getStorageSync('myCity')
	
	const keywords = ref('')
	// function getListByKey(i){
	// 	if(!i.detail.value){
	// 		return
	// 	}
	// 	parklist({city_id:cityItem.id,limit:50,keywords:i.detail.value}).then(res=>{
	// 		mapData.list = res.data.data.map(item=>{
	// 			item.iconPath = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dian.png'
	// 			item.width = 20
	// 			item.height = 20
	// 			item.latitude = item.lat
	// 			item.longitude = item.lng
	// 			item.callout = {
	// 				content: huanH(item.park_name,15),
	// 				textAlign:'center',
	// 				color:'#333',
	// 				bgColor:'#fff',
	// 				borderRadius:4,
	// 				padding: 4,
	// 				display:'ALWAYS'
	// 			}
	// 			return item
	// 		})
	// 	})
	// }
	
	let cityItem = JSON.parse(JSON.stringify(myCity))
	let cityList = []
	//获取列表
	city({city_id:myCity.id}).then(res=>{
		cityList = res.data
		//获取当前城市信息
		getCityInfo()
	})
	
	const sxDiv_ref = ref('sxDiv_ref')
	function initCity(){
		keywords.value=''
		console.log(sxDiv_ref)
		sxDiv_ref.value.clearAll()
		cityItem = JSON.parse(JSON.stringify(myCity))
		getCityInfo()
	}
	
  function getCityInfo(){
		mapData.lng = 0
		internalInstance.proxy.$forceUpdate()
		GetSuCityInfo({city_id:cityItem.id}).then(res=>{
			mapData.lng = parseFloat(res.data.lng) + 0.2
			mapData.lat = res.data.lat
			mapData.scale = res.data.type == 1?6.5:res.data.type == 2?7.6:11
			
			//获取项目信息
			if(cityItem.type>2){
				circles[0].latitude = res.data.lat
				circles[0].longitude = res.data.lng
				circles[0].radius = 12000
				getProject(mapData.lng,mapData.lat)
			}else{
				circles[0].latitude = ''
				circles[0].longitude = ''
				getProjectByArea()
			}
		})
	}
	//获取项目信息
	function getProject(){
		// ,distance:circles[0].radius
		parklist({city_id:cityItem.id,limit:2000,keywords:keywords.value,...queryData}).then(res=>{
			parkList = res.data.data
			mapData.list = res.data.data.map(item=>{
				item.iconPath = item.label_id==6?'../../static/image/1.png':item.label_id==3?'../../static/image/2.png':'../../static/image/3.png'
				item.width = 20
				item.height = 20
				item.latitude = item.lat
				item.longitude = item.lng
				item.callout = {
					content: huanH(item.park_name,15),
					textAlign:'center',
					color:'#333',
					bgColor:'#fff',
					borderRadius:4,
					padding: 4,
					display:circles[0].radius>5000?'BYCLICK':'ALWAYS'
				}
				return item
			})
			internalInstance.proxy.$forceUpdate()
		})
	}
	//获取项目信息
	function getProjectByArea(){
		parklist({city_id:cityItem.id,limit:200,keywords:keywords.value,...queryData}).then(res=>{
			parkList = res.data.data
			internalInstance.proxy.$forceUpdate()
		})
		chain_city_map({city_id:cityItem.id,type:'park'}).then(res=>{
			mapData.list = res.data.map((item,index)=>{
				item.iconPath = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/touming.png'
				item.width = 4
				item.height = 4
				item.latitude = item.lat
				item.longitude = item.lng
				// item.title = item.city_name
				item.callout = {
					content: huanH(item.city_name,6) + '\n' + item.total,
					textAlign:'center',
					color:'#fff',
					bgColor:color1[8],
					borderRadius:4,
					padding: 4,
					display:'ALWAYS'
				}
				return item
			})
		})
	}
	
	//地图缩放 显示文字
	function changeScale(e){
		if(!e.target.centerLocation)
			return
		if(cityItem.type>2){
			let lat = e.target.centerLocation.latitude
			let lng = e.target.centerLocation.longitude
			circles[0].latitude = lat
			circles[0].longitude = lng
			getRadius(e.target)
			getProject()
		}
	}
	// 获取半径
	function getRadius(data){
		let lat1 = data.region.northeast.latitude
		let lng1 = data.region.northeast.longitude
		let lat2 = data.region.southwest.latitude
		let lng2 = data.region.southwest.longitude
		let radius = 0
		radius = getMapDistance(lat1,lng1,lat2,lng1)/4*1.2
		circles[0].radius = radius
	}
	function getMapDistance(lat1, lng1, lat2, lng2){
			const radUserLatitude = lat1 * Math.PI / 180
			const radLatitude = lat2 * Math.PI / 180
			const x = lng1 * Math.PI / 180 - lng2 * Math.PI / 180
			const y = radUserLatitude - radLatitude
			return distanceComputer(x,y,radUserLatitude, radLatitude)
	}
	function distanceComputer(x,y,userLatitude,latitude){
		const radLength = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(y/2),2) + Math.cos(userLatitude)*Math.cos(latitude)*Math.pow(Math.sin(x/2),2)))
		return Math.round(radLength * 6371000 * 10000) / 10000 // 保留四位小数
	}
	//半径结束
	
	
	//地块颜色
	let polygons = reactive([])
	
	import Base64 from 'base-64';

	const mapUrl ='https://apis.map.qq.com/ws/district/v1'
	
	//获取城市code
	function getCode(){
		let code = mapCode.find(item=>item.name.indexOf(cityItem.city_name)>-1||cityItem.city_name.indexOf(item.name)>-1).code
		let url = Base64.encode(mapUrl + '/getchildren?key=KXMBZ-7O3WW-UVYRL-RNUFA-OWYYS-V5BN7&get_polygon=2&max_offset=500&id='+ code)
		getSekuai(url)
	}
	function getSekuai(url){
		getHttpDataFromWeb({url}).then(res=>{
			res.data.result[0].forEach((item,index)=>{
				let colorC = color[index]
				let colorB = color1[index]
				item.polygon.forEach(itemp=>{
					let obj = changeXs(itemp)
					polygons.push({
						points:obj,
						fillColor:colorC,
						strokeColor:colorB,
						strokeWidth:2
					})
				})
			})
		})
	}
	function changeXs(item){
		let obj = []
		for(let i=0;i<(item.length/2);i++){
			obj.push({latitude:item[2*i+1],longitude:item[2*i]})
		}
		return obj
	}
	
	
	function clickMap(e){
		if(keywords.value){
			markertap(e)
			return
		}
		if(cityItem.type>2){
			markertap(e)
		}else{
			cityList.forEach(item=>{
				if(item.id==e.markerId){
					cityItem = item
					getCityInfo()
				}else if(item.children&&item.children.length>0){
					item.children.forEach(item1=>{
						if(item1.id==e.markerId){
							cityItem = item1
							getCityInfo()
						}
					})
				}
			})
		}
	}
	
	
	
	const popup = ref(null)
	//点击marker
	function markertap(e){
		mapData.list = mapData.list.map(item=>{
			let isC = e.detail.markerId == item.id
			item.iconPath = isC?'../../static/image/icon_a.png':item.label_id==6?'../../static/image/1.png':item.label_id==3?'../../static/image/2.png':'../../static/image/3.png'
			item.width = isC?25:20
			item.height = isC?25:20
			return item
		})
		getparkdetail({id:e.detail.markerId}).then(res=>{
			popup.value.open()
			mapData.detail = res.data 
		})
	}
	const satellite = ref(false)
	// 卫星图
	function changeMode(){
		satellite.value = !satellite.value
	}
</script>
<style scoped lang="scss">
page{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.page{
	width: 100%;
	height: 100%;
	overflow: hidden;
	.nav{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		transition: all 0.5s;
		
	}
	.input_view{
		display: flex;
		align-items: center;
		border-radius: 2px;
		color: #333;
		width: 100%;
		.title{
			font-weight: 500;
			text-align: center;
			font-size: 22px;
			text-align: center;
			width: 100%;
			color: #000;
		}
	}
	.ss_div{
		position: absolute;
	}
}
.map_div{
	width: 100%;
	height: 100%;
}
map{
	width: 100%;
	height: 100%;
}
//#ifdef APP-PLUS
.map_div{
	width: 100%;
	height: v-bind('style.windowH') !important;
}
map{
	width: 100%;
	height: v-bind('style.windowH') !important;
}
//#endif
.r_div{
	position: absolute;
	right: 20px;
	z-index: 10;
}
.t_div{
	position: absolute;
	left: 20px;
	z-index: 10;
}
.wxt_div{
	padding: 5px 10px;
	border-radius: 4px;
	background-color: #fff;
	font-size: 14px;
	color: #333;
	text-align: center;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin-bottom: 10px;
	max-width: 42px;
	image{
		width: 26px;
		height: 26px;
	}
}

.wxt_div1{
	margin-left:8px ;
	&:first-child{
		margin-left: 0;
	}
}
.input_ss{
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
	width: calc(100% - 40px);
	opacity: 1;
	border-radius: 4px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 20px;
	align-items: center;
	z-index: 10;
	.btn_list{
		width: 80px;
		height: 32px;
		line-height: 32px;
		margin-right: 5px;
		font-size: 14px;
		color: #fff;
		background-color: #319fff;
		text-align: center;
		border-radius: 6px;
	}
}
.input_div{
	width: calc(100% - 100px);
	height: 34px;
	opacity: 1;
	border-radius: 10px;
	background: rgb(245, 245, 245);
	margin: 10px 5px;
	display: flex;
	align-items: center;
	.ss{
		position: relative;
		width: 16px;
		height: 16px;
		margin: 0 12px 0 12px;
	}
	.ss_text{
		font-size: 12px;
		color: rgba(197, 197, 197, 1);
		width: calc(100% - 40px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.ss_type{
		position: absolute;
		right: 12px;
		color: rgba(0, 145, 255, 1);
		font-weight: 800;
		font-size: 12px;
		display: flex;
		align-items: center;
		width: 70px;
		text{
			display: inline-block;
			width: 50px;
		}
		image{
			height: 12px;
			width: 12px;
			margin-left: 6px;
			position: relative;
			top: 2px;
		}
		&::before{
			position: absolute;
			content: ' ';
			height: 16px;
			width: 2px;
			background: #eee;
			left: -10px;
		}
	}
}

.p_div{
	width: calc(100% - 40px);
	background-color: #fff;
	padding: 20px 20px 0;
	height: v-bind('style.height');
	border-radius: 20px 20px 0 0;
	transition: all 0.5s;
	position: relative;
	.p_hua{
		position: absolute;
		top: 6px;
		width: 60px;
		height: 4px;
		border-radius: 2px;
		background-color: #999;
		left: calc(50% - 30px);
	}
	.p_content{
		width: 100%;
		max-height: calc(100% - 80px);
		overflow-y: auto;
		margin-top: 10px;
	}
}
.p_div1{
	width: 100%;
	background-color: #fff;
	padding: 5px 0px 50px;
	border-radius: 20px 20px 0 0;
	transition: all 0.5s;
	position: relative;
}
.p_top{
	.p_title{
		width: 100%;
		font-size: 16px;
		margin-bottom: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.p_text{
		font-size: 14px;
		color: #666;
	}
	.p_chain{
		display: inline-block;
		font-size: 14px;
		padding: 1px 6px;
		border-radius: 4px;
		color: #fff;
		background: #6CCEFF;
		margin-right: 6px;
		margin-bottom: 4px;
	}
}
.bgcolor_blue{
	background-color: #267DE9 !important;
}
.color_fff{
	color: #fff !important;
}
.ps_div{
	position: absolute;
	left: 12px;
	bottom: 110px;
	background: #fff;
	border-radius: 6px;
	.ps_item{
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #333;
		font-weight: bold;
		margin: 10px;
		image{
			margin-right: 4px;
			height: 16px;
			width: 16px;
		}
	}
}

.list_item{
	width: calc(100% - 30px);
	// min-height: 100px;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 10px 5px 15px;
	position: relative;
	.img_small{
		height: 40px !important;
		width: 40px !important;
		border-radius: 4px !important;
		text-align: center;
		font-size: 14px !important;
	}
	.img{
		width: 120px;
		height: 90px;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
		.logo_name{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #0091FF;
			color: #fff;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_level{
			position: absolute;
			top: 6px;
			left: 0px;
			padding: 2px 8px;
			border-radius: 4px;
			background: linear-gradient(135deg,#0091FF33,#0091FF);
			font-size: 12px;
			color: #fff;
		}
	}
	.right_div_small{
		width: calc(100% - 50px) !important
	}
	.right_div{
		width: calc(100% - 130px);
		.r_title{
			font-size: 16px;
			color: #333;
		}
	}
	.chain_view{
		background-color: #ECF3FF;
		color: #3D7CE2;
		padding: 0 4px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 0 0;
		display: inline-block;
	}
	.add_view{
		display: flex;
		font-size: 12px;
		margin-top: 6px;
		color:#999;
		image{
			max-width: 14px;
			min-width: 14px;
			height: 14px;
			margin-right: 6px;
			margin-top: 1px;
		}
	}
	.color_red{
		color: #f1340e;
	}
	.div100{
		width: 100%;
	}
}
.city_div{
	width: calc(100% - 10px);
	border-radius: 8px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.city_item{
		width: calc(50% - 5px);
		margin: 10px 0px;
		// box-shadow: 0px 1px 10px 0px #0A477519;
		image{
			width: 100%;
			border-radius: 6px;
		}
	}
}
.type_div{
	background-color: #fff;
}
.listType{
	width: 25%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #fff;
}
.active_item{
	font-size: 18px;
	position: relative;
	font-weight: bold;
	&::before{
		content: ' ';
		position: absolute;
		bottom: 4px;
		height: 3px;
		width: 60px;
		background-color: #0091FF;
		border-radius: 3rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.list_ddd{
	width: 100%;
}
.rc_item{
	width: calc(100% - 30px);
	// min-height: 100px;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 10px 5px 15px;
	position: relative;
	.rc_item_left{
		width: 48px;
		height: 48px;
		border-radius: 24px;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.rc_item_right{
		width: calc(100% - 60px);
		.rc_name{
			font-size: 15px;
			margin-bottom: 6px;
			color: #333;
		}
		.rc_add{
			font-size: 14px;
			color: #666;
			margin-bottom: 4px;
		}
		.rc_desc{
			font-size: 12px;
			color: #999;
		}
	}
}
</style>

